<template>
	<view class="page" id="addbank_page" :style="{'--color':color}">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :bgMake="5" :Color="2" title="添加银行卡"></navBar>
		<!-- #endif -->
		<view class="form2_list">
			<view class="form2_item d-flex">
				<view class="form2_t">持卡人姓名</view>
				<input type="text" v-model="cardMsg.userName" placeholder="请输入持卡人姓名" class="form2_input flex-1"
					placeholder-class="pla" />
			</view>
		</view>


		<view class="form2_list">
			<view class="form2_item d-flex">
				<view class="form2_t">选择银行</view>
				<picker class="flex-1" mode="selector" :range="bank" @change="change">
					<view class="uni-list-cell-db d-flex a-center">
						<view class="selectBank flex-1" :class="{pla: !cardMsg.bankName}">
							{{cardMsg.bankName?cardMsg.bankName:'请选择开户行'}}</view>
						<text class="iconfont icon-xiangyouxiayiye"></text>
					</view>
				</picker>
			</view>
			<view class="form2_item d-flex">
				<view class="form2_t">开户支行</view>
				<input type="text" v-model="cardMsg.branchBank" placeholder="请输入开户支行" class="form2_input flex-1"
					placeholder-class="pla" />
			</view>
			<view class="form2_item d-flex">
				<view class="form2_t">银行卡号</view>
				<input type="number" maxlength="20" v-model="cardMsg.bankCard" placeholder="请输入银行卡号"
					class="form2_input flex-1" placeholder-class="pla" />
			</view>
			<template v-if='cardMsg && cardMsg.direct_income == 1'>
				<view class="form2_item d-flex">
					<view class="form2_t">身份证号</view>
					<input type="text" maxlength="20" v-model="cardMsg.idNo" placeholder="请输入身份证号"
						class="form2_input flex-1" placeholder-class="pla" />
				</view>
				<view class="form2_item d-flex uploads">
					<view class="form2_t">身份证正面</view>
					<view class="flex-1">
						<view class="up-box d-flex a-center j-centert" @click="selectImage(0)">
							<image v-if='tempFilePaths[0]' :src="tempFilePaths[0]" class="img"></image>
							<image v-else :src="staticUrl+'/images/plus_ico.png'" class="icon-upload"></image>
						</view>
					</view>
				</view>
				<view class="form2_item d-flex uploads">
					<view class="form2_t">身份证反面</view>
					<view class="flex">
						<view class="up-box d-flex a-center j-centert" @click="selectImage(1)">
							<image v-if='tempFilePaths[1]' :src="tempFilePaths[1]" class="img"></image>
							<image v-else :src="staticUrl+'/images/plus_ico.png'" class="icon-upload"></image>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view v-if="cardMsg">
			<view class="fail_reason" v-if='cardMsg.contract_state == 0 && cardMsg.fail_reason'>
				{{ cardMsg.fail_reason }} ! 请重新上传</view>
			<view v-if='cardMsg.contract_state == 2' class="btn3" style="background-color: #F4C575;">审核中···</view>
			<view v-else class="btn3 thmeBg" @click="addBankCard" :style="{'--color': color}">确定</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	var that;
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,





				minute: '中国工商银行',

				bank: [
					'中国工商银行', '中国建设银行', '中国银行', '交通银行', '中国农业银行', '招商银行',
					'邮政储蓄银行', '光大银行', '民生银行', '平安银行', '浦发银行', '中信银行', '兴业银行',
					'华夏银行', '广发银行', '重庆银行', '重庆农村商业银行', '北京银行', '徽商银行', '天津银行', '深圳农村商业银行', '上海银行', '汉口银行', '南京银行',
					'宁波银行', '龙江银行', '北京农商银行', '江苏银行', '广州银行', '浙商银行', '杭州银行', '上海农商银行', '渤海银行', '广州农村商业银行', '青岛银行',
					'成都银行', '哈尔滨银行', '吉林银行', '大连银行', '齐鲁银行', '东莞银行', '长沙银行', '河北银行', '东莞农村商业银行', '郑州银行', '包商银行'
				],


				front_photo: '', //身份证正面图片url
				back_photo: '', //身份证反面图片url
				tempFilePaths: ['', ''],
				cardMsg: ''
			}
		},
		onShow() {
			// #ifdef MP			
			uni.hideShareMenu();
			// #endif
		},

		onLoad() {
			that = this
			that.initialize();

		},
		methods: {
			change(e) {
				that.cardMsg.bankName = that.bank[e.detail.value]
			},
			selectImage(index) { //选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: (res) => {
						if (res.tempFilePaths) {
							that.tempFilePaths[index] = res.tempFilePaths[0]
						}
						that.tempFilePaths = [].concat(that.tempFilePaths)
					}
				})
			},
			initialize: function() {
				that.$http.post({
					url: '/singleSaleApi/findBankCard',

				}).then(res => {
					if (res.errcode == 100 && res.data) {
						var data = res.data;
						that.cardMsg = res.data
						if (data.front_photo) {
							that.tempFilePaths[0] = that.imgUrl + data.front_photo
							that.front_photo = data.front_photo
						}
						if (data.back_photo) {
							that.tempFilePaths[1] = that.imgUrl + data.back_photo
							that.back_photo = data.back_photo
						}
						if (data.userName || data.bankName || data.bankCard) {
							uni.setNavigationBarTitle({
								title: '修改银行卡'
							})
						} else {
							uni.setNavigationBarTitle({
								title: '添加银行卡'
							})
						}
					}
				})
			},
			async addBankCard() {
				if (!that.cardMsg.userName) {
					uni.showToast({ title: '请输入持卡人姓名', icon: 'none' })
					return
				}
				if (!that.cardMsg.bankName) {
					uni.showToast({ title: '请选择银行', icon: 'none' })
					return
				}
				if (!that.cardMsg.branchBank) {
					uni.showToast({ title: '请输入开户支行', icon: 'none' })
					return
				}
				if (!that.cardMsg.bankCard) {
					uni.showToast({ title: '请输入银行卡号', icon: 'none' })
					return
				}

				if (that.cardMsg.direct_income == 1) {
					if (!that.cardMsg.idNo) {
						uni.showToast({ icon: 'none', title: '请输入身份证号码' })
						return
					}
					if (!that.$reg.idCard.test(that.cardMsg.idNo)) {
						uni.showToast({ icon: 'none', title: '身份证格式错误' })
						return
					}
					if (!that.tempFilePaths[0]) {
						uni.showToast({ icon: 'none', title: '请上传清晰的身份证正面照！' })
						return
					}
					if (!that.tempFilePaths[1]) {
						uni.showToast({ icon: 'none', title: '请上传清晰的身份证反面照！' })
						return
					}
					uni.showLoading({
						title: '提交中'
					})
					if (that.tempFilePaths[0] && that.tempFilePaths[0].indexOf('blob:') > -1) {
						await that.$common.uploadFile('/zzjApp/uploade?bid=' + uni.getStorageSync('bid'), that
							.tempFilePaths[0], 1).then(res2 => {
							var data = res2;
							if (typeof res2 == 'string') { data = JSON.parse(data) }
							if (data.errcode == 100) {
								var imgItem = data.url;
								imgItem = imgItem.substring(22, imgItem.length);
								that.front_photo = imgItem
							} else {
								uni.showToast({
									icon: 'none',
									title: data.msg + '!',
									duration: 2000
								})
							}
						})
					}
					if (that.tempFilePaths[1] && that.tempFilePaths[1].indexOf('blob:') > -1) {
						await that.$common.uploadFile('/zzjApp/uploade?bid=' + uni.getStorageSync('bid'), that
							.tempFilePaths[1], 1).then(res2 => {
							var data = res2;
							if (typeof res2 == 'string') { data = JSON.parse(data) }
							if (data.errcode == 100) {
								var imgItem = data.url;
								imgItem = imgItem.substring(22, imgItem.length);
								that.back_photo = imgItem
							} else {
								uni.showToast({
									icon: 'none',
									title: data.msg + '!',
									duration: 2000
								})
							}
						})
					}
				}

				that.$http.post({
					url: '/singleSaleApi/addBankcard',
					data: {

						userName: that.cardMsg.userName,
						bankName: that.cardMsg.bankName,
						bankCard: that.cardMsg.bankCard,
						branchBank: that.cardMsg.branchBank,
						idNo: that.cardMsg.idNo, //身份证号
						front_photo: that.front_photo, // 身份证正面图片url
						back_photo: that.back_photo, // 身份证反面图片url
					}
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: res.msg,
						duration: 1500
					})
					uni.hideLoading()
					if (res.errcode == 100) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				})
			}
		},
		computed: {
			...mapState(['color', 'bid', 'vid']),
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F8F8F8;

		.form2_list {
			margin-bottom: 30upx;
		}

		.pla {
			color: #bdbdbd;
		}

		.fail_reason {
			text-align: center;
			color: red;
			margin-bottom: 30rpx;
		}
	}

	.uploads {
		height: 160rpx;

		.up-box {
			background-color: #F5F5F5;
			width: 200rpx;
			height: 130rpx;

			.icon-upload {
				width: 60rpx;
				height: 60rpx;
				opacity: 0.6;
			}

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.form2_item .form2_input,
	.selectBank {
		font-size: 28rpx;
		padding-left: 30rpx;
	}

	.form2_item .form2_t {
		color: #666666;
	}

	.form_item:last-child {
		border-bottom: none;
	}

	.form_list {
		padding: 0 30rpx;
		background: #ffffff;
	}

	.form_list .form_item {
		height: 97rpx;
		border-bottom: 1px solid #dddddd;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}

	.form2_list {
		background: #ffffff;
	}

	.form_item .form_t {
		width: 200rpx;
		font-size: 32rpx;
	}

	.form_item .form_input {
		width: 450rpx;
		border: none;
		background: none;
		appearance: none;
		-webkit-appearance: none;
		font-size: 28rpx;

		text-align: right;
		color: #333333;
	}

	.form2_list .form2_item {
		height: 98rpx;
		padding: 0 30rpx;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}
</style>